<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传工程文件</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/sample.css">
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/js/plupload.full.min.js"></script>
</head>

<body>
	<div class="header">BIMFACE简单示例</div>
	<div class="tips">第一步：调用服务端API上传文件，并发起转换</div>
	<div class="box">

		<div class="upload-file">
			<div class="upload-button" id="pickfiles">选择文件</div>
			<div class="upload-desc">
				格式：rvt、rfa、dwg、skp、nwc、nwd、ifc、3ds、dwf <br /> 大小：500M
			</div>
		</div>

		<div class="result hide" id="wait-box">
			<img src="${pageContext.request.contextPath}/images/timg.gif"><br /> 正在转换，请稍等...
		</div>

		<div class="result hide" id="translate-error-box">
			<img src="${pageContext.request.contextPath}/images/error.jpg"><br /> 转换失败，请<a href="${pageContext.request.contextPath}/upload">重新上传</a>
		</div>

	</div>

	<script>
var uploader = new plupload.Uploader({
	
    runtimes : 'html5,flash,silverlight,html4',
    browse_button : 'pickfiles', 
    url : '${pageContext.request.contextPath}/BimFace/upload',
     
    filters : {
        max_file_size : '500mb',
        mime_types: [
            {title : "files", extensions : "rvt,rfa,dwg,skp,nwc,nwd,ifc,3ds,dwf"}
        ]
    },
 
    flash_swf_url : '${pageContext.request.contextPath}/js/Moxie.swf',
    silverlight_xap_url : '${pageContext.request.contextPath}/js/Moxie.xap',
 
    init: {
    	
        FilesAdded: function(up, files) {
        	uploader.start();
            return false;
        },
 
        UploadProgress: function(up, file) {
        	$("#pickfiles").html(file.percent-1 + '%');
        },
        
        FileUploaded : function(up, file, info) {
        	var fileId = $.parseJSON(info.response).fileId;
        	getStatus(fileId);
        	
        	$('.upload-file').hide();
        	$('#wait-box').show();
		}, 
 
        Error: function(up, err) {
        }
    }
});
uploader.init();
var timer;
function getStatus(fileId) {
	timer = setInterval(function() {
		$.get("${pageContext.request.contextPath}/BimFace/pull?fileId="+ fileId,function(res){
			var re = res;
			if(typeof res=='string')
			{
				var re = $.parseJSON(res);
			}
			if(re.status == 'success') {
				location.href="${pageContext.request.contextPath}/BimFace/view?fileId=" + fileId;
						clearInterval(timer);
					} else if (re.status == 'failed') {
						$('#wait-box').hide();
						$('#translate-error-box').show();
						clearInterval(timer);
					}
				})
			}, 1000);
		}
	</script>
</body>
</html>